<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<div class="well well-small">
    <h2 style="text-align:center; color:red"><strong>WELCOME TO OUR FAMILY!!!</strong></h2>
</div>
<ul class="breadcrumb">
    <li class="active"><h4>Online Booking</h4></li>
</ul>
<div class="row">	  
    <div id="gallery" class="span3">
        <a href="themes/images/rooms/dormitory/1.jpg" title="Dormitory room">
            <img src="themes/images/rooms/dormitory/1.jpg" style="width:100%" alt="Dormitory room"/>
        </a>
        <div id="differentview" class="moreOptopm carousel slide">
            <div class="carousel-inner">
                <div class="item active ">
                    <a href="themes/images/rooms/dormitory/2.jpg"> <img style="width:29%" src="themes/images/rooms/dormitory/2.jpg" alt=""/></a>
                    <a href="themes/images/rooms/dormitory/3.jpg"> <img style="width:29%" src="themes/images/rooms/dormitory/3.jpg" alt=""/></a>
                    <a href="themes/images/rooms/dormitory/4.jpg" > <img style="width:29%" src="themes/images/rooms/dormitory/4.jpg" alt=""/></a>
                </div>
                <div class="item">
                    <a href="themes/images/rooms/dormitory/5.jpg" > <img style="width:29%" src="themes/images/rooms/dormitory/5.jpg" alt=""/></a>
                </div>
            </div>
            <!--  
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> 
            -->
        </div>
    </div>
    <div class="span6">
        <h3>Dormitory Room</h3>
        <ul>
            <li> 3-single beds</li>
            <li> Air-con</li>
        </ul>
        <hr class="soft"/>
        <h4>Details Information</h4>
        <p>
            Some more details about dormitory room...

        </p>
        <hr class="soft"/>
    </div>
    <div class="span9">
        <ul id="productDetail" class="nav nav-tabs">
            <li class="active"><a href="#home" data-toggle="tab"><h5>Booking</h5></a></li>
        </ul>
        <div class="well">
            <form class="form-horizontal" >
                <div class="control-group">
                    <h4>Booking Information</h4>
                    <label class="control-label">Room type <sup>*</sup></label>
                    <div class="controls">
                        <select class="span3" name="days">
                            <option value="">-</option>
                            <option value="1">Dormitory</option>
                            <option value="2">Rendezvous Double</option>
                            <option value="3">Rendezvous Triple</option>
                        </select>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="inputFname1">Check in date <sup>*</sup></label>
                    <div class="controls" >
                        <input class="span2" value="" id="checkin" type="text" data-date-format="dd/mm/yyyy">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Check out date<sup>*</sup>&nbsp;&nbsp;
                        <input class="span2" value="" id="checkout" type="text" data-date-format="dd/mm/yyyy">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputFname1">No Of Room <sup>*</sup></label>
                    <div class="controls">
                        <input type="text" id="inputFname1" class="span1">
                    </div>
                </div>

                <h4>Your personal information</h4>
                <div class="control-group">
                    <label class="control-label">Title <sup>*</sup></label>
                    <div class="controls">
                        <select class="span1" name="days">
                            <option value="">-</option>
                            <option value="1">Mr.</option>
                            <option value="2">Mrs</option>
                            <option value="3">Miss</option>
                        </select>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputFname1">First name <sup>*</sup></label>
                    <div class="controls">
                        <input type="text" id="inputFname1" placeholder="First Name">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputLnam">Last name <sup>*</sup></label>
                    <div class="controls">
                        <input type="text" id="inputLnam" placeholder="Last Name">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">Date of Birth <sup>*</sup></label>
                    <div class="controls">
                        <select class="span1" name="days">
                            <option value="">-</option>
                            <option value="1">1&nbsp;&nbsp;</option>
                        </select>
                        <select class="span1" name="days">
                            <option value="">-</option>
                            <option value="1">1&nbsp;&nbsp;</option>
                        </select>
                        <select class="span1" name="days">
                            <option value="">-</option>
                            <option value="1">1&nbsp;&nbsp;</option>
                        </select>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputLnam">Nationality <sup>*</sup></label>
                    <div class="controls">
                        <input type="text" id="inputLnam" placeholder="Nationality">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="input_email">Email <sup>*</sup></label>
                    <div class="controls">
                        <input type="text" id="input_email" placeholder="Email">
                    </div>
                </div>	
                <div class="control-group">
                    <label class="control-label" for="input_email">Phone No <sup>*</sup></label>
                    <div class="controls">
                        <input type="text" id="input_email" placeholder="Phone No">
                    </div>
                </div>	

                <h4>Additional information</h4>
                <div class="control-group">
                    <label class="control-label">Airport Pickup <sup>*</sup></label>
                    <div class="controls">
                        <select class="span1" name="days">
                            <option value="">-</option>
                            <option value="1">Yes</option>
                            <option value="2">No</option>
                        </select>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">Note <sup>*</sup></label>
                    <div class="controls">
                        <textarea class="span3"></textarea>
                    </div>
                </div>

                <!--                                        <div class="alert alert-block alert-error fade in">
                                                            <button type="button" class="close" data-dismiss="alert">×</button>
                                                            <strong>Lorem Ipsum is simply</strong> dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                                                        </div>	-->



                <div class="control-group" >
                    <div class="controls">
                        <input type="hidden" name="email_create" value="1">
                        <input type="hidden" name="is_new_customer" value="1">
                        <input class="btn btn-large btn-success pull-right" type="submit" value="Submit Book" />
                    </div>
                </div>	
            </form>
        </div>

    </div>
</div>


<script>
	
    $(function(){
        // disabling dates
        var nowTemp = new Date();
        var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

        var checkin = $('#checkin').datepicker({
            onRender: function(date) {
                return date.valueOf() < now.valueOf() ? 'disabled' : '';
            }
        }).on('changeDate', function(ev) {
            if (ev.date.valueOf() > checkout.date.valueOf()) {
                var newDate = new Date(ev.date)
                newDate.setDate(newDate.getDate() + 1);
                checkout.setValue(newDate);
            }
            checkin.hide();
            $('#checkout')[0].focus();
        }).data('datepicker');
        var checkout = $('#checkout').datepicker({
            onRender: function(date) {
                return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
            }
        }).on('changeDate', function(ev) {
            checkout.hide();
        }).data('datepicker');
    });
</script>
